export default {
  name: 'AvicNumberRange',
  props: {
    /** 禁用控件 */
    disabled: { type: Boolean, default: false },
    /** 数值范围对象{max: Number, min: Number} */
    value: { type: Object, default: null },
    /** 最小值(左值) */
    min: { type: [Number, String], default: undefined },
    /** 最大值(右值) */
    max: { type: [Number, String], default: undefined },
    /** 最小值控件属性 */
    minAttrs: { type: Object, default: () => ({}) },
    /** 最大值控件属性 */
    maxAttrs: { type: Object, default: () => ({}) }
  },
  computed: {
    minProps() {
      const { max } = this.minAttrs || {};
      return {
        disabled: this.disabled,
        ...this.minAttrs,
        value: this.getMin(),
        max,
        onChange: (val) => {
          this.$emit('update:min', val);
          this.$emit('update:value', { min: val, max: this.getMax() });
          this.$emit('input', { min: val, max: this.getMax() });
          this.minAttrs?.onChange && this.minAttrs.onChange(val);
        },
        onBlur: () => {
          const max = this.getMax();
          const min = this.getMin();
          if (typeof max === 'number' && typeof min === 'number' && max < min) {
            this.$emit('update:max', min);
            this.$emit('update:value', { min, max: min });
            this.$emit('input', { min, max: min });
            this.$refs.max.focus();
            this.$nextTick(() => {
              setTimeout(() => {
                const el = this.$refs.max.$el.querySelector('input');
                el.select();
              }, 0);
            });
          }
        },
        onPressEnter: (e) => {
          this.maxAttrs?.onPressEnter && this.maxAttrs.onPressEnter(e);
          this.$emit('pressEnter', e);
        }
      };
    },
    maxProps() {
      const { min } = this.maxAttrs || {};
      return {
        disabled: this.disabled,
        ...this.maxAttrs,
        value: this.getMax(),
        min,
        onChange: (val) => {
          this.$emit('update:max', val);
          this.$emit('update:value', { min: this.getMin(), max: val });
          this.$emit('input', { min: this.getMin(), max: val });
          this.$attrs.maxAttrs?.onChange && this.$attrs.maxAttrs.onChange(val);
        },
        onBlur: () => {
          const max = this.getMax();
          const min = this.getMin();
          if (typeof max === 'number' && typeof min === 'number' && max < min) {
            this.$emit('update:min', max);
            this.$emit('update:value', { min: max, max });
            this.$emit('input', { min: max, max });
            this.$refs.min.focus();
            this.$nextTick(() => {
              setTimeout(() => {
                const el = this.$refs.min.$el.querySelector('input');
                el.select();
              }, 0);
            });
          }
        },
        pnPressEnter: (e) => {
          this.$attrs.maxAttrs?.onPressEnter && this.$attrs.maxAttrs.onPressEnter(e);
          this.$emit('pressEnter', e);
        }
      };
    }
  },
  methods: {
    getMin() {
      return this.value && typeof this.value.min !== 'undefined' ? this.value.min : this.min;
    },
    getMax() {
      return this.value && typeof this.value.max !== 'undefined' ? this.value.max : this.max;
    }
  },
  render() {
    return (
      <span style={{ display: 'inline-flex' }}>
        <a-input-number ref={'min'} {...this.minProps}></a-input-number>
        <span class={'number-range-separator'} style={{ padding: '0 2px' }}>
          -
        </span>
        <a-input-number ref={'max'} {...this.maxProps}></a-input-number>
      </span>
    );
  }
};
